<template class='head w100'>
  <van-sticky container="#app">
    <van-nav-bar :title="title" @click-left="leftClicked">
      <!-- 左边图标 -->
      <div class="left" slot="left">
        <van-icon name="arrow-left" color="#000" size="22px" style="line-height: 42px" />
      </div>
      <!-- 右边图标 -->
      <div v-show="rightFlag" class="right" slot="right">
        <van-icon
          name="ellipsis"
          color="#000"
          size="30px"
          style="line-height: 42px"
          @click="rightClicked"
        />
      </div>
    </van-nav-bar>
  </van-sticky>
</template>

<script>
import { mapMutations } from 'vuex'
import Vue from 'vue'
import { NavBar, Icon, Sticky } from 'vant'
Vue.use(NavBar).use(Icon).use(Sticky)
export default {
  data() {
    return {
    }
  },
  props: {
    types: {
      type: String,
      default: 'home'
    },
    title: {
      type: String,
      default: 'xxx'
    },
    rightFlag: {
      type: Boolean,
      default: true
    },
    rightClick: {
      type: Function
    }
  },
  methods: {
    ...mapMutations('overlayModule', ['CHANGESLIDER']),
    leftClicked: function () {
      switch (this.types) {
        case 'login':
        case 'register':
        case 'shopcart':
        case 'user':
          this.$router.push({ name: 'Home' })
          break
        default:
          this.$router.back()
      }
    },
    rightClicked() {
      if (this.rightClick) {
        this.rightClick()
      } else {
        this.CHANGESLIDER()
      }
    }
  }
}
</script>

<style lang='scss' scoped>
.head {
  height: 40px;
}
</style>
